<!--
 * @Descripttion: 客户意向详情
 * @version: 
 * @Author: lehaixia
 * @Date: 2023-04-20 15:36:03
 * @LastEditors: lehaixia
 * @LastEditTime: 2023-08-10 11:37:00
-->
<template>
  <div>
    <div class="tab-content">
      <div class="user-info">
        <div class="left">
          <div class="name">
            {{ detail.customerName }} <span>{{ filterPhone(detail.customerPhone) }}</span>
          </div>
          <div class="other">
            <span>意向加盟城市</span> <span>{{ detail.intendedCity }}</span>
          </div>
          <div class="other">
            <span>所属办事处</span> <span>{{ detail.agencyName }}</span>
          </div>
        </div>
        <div class="right" @click.stop="onCallPhone(detail.customerPhone)">
          <img class="icon" src="@/assets/images/phone.png" />
        </div>
      </div>

      <!-- <Cell title="意向加盟城市" :modelValue="detail.intendedCity" default-value="" readonly />
      <Cell title="所属办事处" :modelValue="detail.agencyName" default-value="" readonly /> -->
      <Cell
        title="意向经营业务"
        :modelValue="getIntendedBusinessName(detail.intendedBusiness)"
        default-value=""
        readonly
      />
      <Cell
        title="意向等级"
        :modelValue="detail.intendedLevel"
        default-value=""
        readonly
        dict-type-code="CTM_INTENTION_LEVEL"
      />
      <Cell title="招商经理" :modelValue="detail.managerName" readonly />
      <Cell
        title="意向客户分类"
        :modelValue="detail.customerType"
        default-value=""
        readonly
        dict-type-code="CTM_TOBE_CUSTOMER_TYPE"
      />
      <Cell title="身份证号" :modelValue="detail.customerIdcard" default-value="" readonly />
      <Cell title="性别" :modelValue="detail.customerSex === 1 ? '男' : '女'" default-value="" readonly />
      <Cell title="年龄" :modelValue="detail.customerAge" default-value="" readonly />
      <Cell title="是否有店面" :modelValue="detail.isHaveShop === 1 ? '是' : '否'" default-value="" readonly />
      <Cell v-if="detail.isHaveShop" title="店面总面积" :modelValue="detail.shopArea" default-value="" readonly />

      <Cell title="特别备注" :modelValue="detail.specialRemarks" default-value="" readonly />
      <Cell title="现经营品牌/行业资历" :modelValue="detail.industryQualification" default-value="" readonly />

      <Cell
        title="跟进进度"
        :modelValue="detail.followUpStage"
        default-value=""
        readonly
        dict-type-code="CTM_INTEND_CUS_FOLLOW_UP_PROGRESS"
      />
      <Cell
        title="客户来源"
        :modelValue="detail.customerSource"
        default-value=""
        readonly
        dict-type-code="CTM_TOBE_CUSTOMER_DATA_FROM"
      />
      <Cell
        title="来源渠道"
        :modelValue="detail.channel"
        default-value=""
        readonly
        dict-type-code="CTM_POTENTIAL_CUSTOMER_SOURCE"
      />
    </div>
    <div class="ctm-content-foot">
      <div class="btn" v-if="detail.followUpStage === 'A'">
        <div class="btn radius-larg ctm-btn-error" @click="onStop">终止</div>
        <div class="btn radius-larg ctm-btn-warning" @click="toEdit">编辑</div>
      </div>
      <div
        class="btn radius-larg ctm-btn-main"
        v-if="detail.followUpStage === 'A' || detail.followUpStage === 'B'"
        @click="onAllocation"
      >
        {{ detail.followUpStage === 'B' ? '重新' : '' }}分配
      </div>
    </div>

    <Termination
      v-model:show="showTermination"
      v-if="showTermination"
      :showDesc="true"
      title="意向客户终止"
      :detailData="detail"
      @submit="onTermination"
    />
    <Allocation v-model:show="showAllocation" v-if="showAllocation" :detailData="detail" @success="refreshList" />
  </div>
</template>

<script lang="ts">
  import Termination from '../components/Termination.vue'
  import Allocation from '../components/Allocation.vue'
  import { reactive, toRefs, defineComponent, getCurrentInstance } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import Cell from '@/components/Cell/index.vue'
  import { detailItem, terminatetItem } from '@/apis/attractInvestment/potentialCustomer'
  import { filterPhone, onCallPhone } from '@/utils'
  import { queryMdmServiceCustDocDefList } from '@/apis/common'

  interface datasModle {
    id: any
    detail: any
    showTermination: boolean
    showAllocation: boolean
    dictData?: any
  }

  export default defineComponent({
    name: 'PotentialCustomerDetail',
    components: { Termination, Cell, Allocation },
    setup(props, ctx) {
      const $router = useRouter()
      const $route = useRoute()

      const { proxy }: any = getCurrentInstance()

      const datas = reactive<datasModle>({
        id: $route.query.id || '',
        showTermination: false, // 终止
        showAllocation: false, // 分配经销商
        detail: {}
      })
      let BIZ_TYPE_LIST: any[] = []

      const onClickTab = (tabItem: Object) => {
        // 点击tab
        console.log(tabItem)
      }

      // 终止
      const onStop = () => {
        datas.showTermination = true
      }
      const onAllocation = () => {
        datas.showAllocation = true
      }

      // 客户意向编辑
      const toEdit = () => {
        $router.push({
          path: '/potentialCustomer/edit',
          query: {
            id: datas.detail && datas.detail.id
          }
        })
      }

      const onTermination = (data: any) => {
        terminatetItem(data)
          .then((res: any) => {
            if (res.success === 1) {
              proxy.$toast('终止成功')
              refreshList()
            }
            datas.showTermination = false
          })
          .catch((e: any) => {
            if (e) proxy.$toast(e || '终止失败')
          })
      }

      // 详情刷新列表页
      const refreshList = () => {
        getDetail()
        proxy.$SimpleEvents.emit('refreshCustomerChangeList')
      }

      const getDetail = async () => {
        const id = `${datas.id}`
        BIZ_TYPE_LIST = await queryMdmServiceCustDocDefList('QY037')
        detailItem(id).then((res: any) => {
          datas.detail = res.data
        })
      }
      const getIntendedBusinessName = (code: any) => {
        const tmpArr = `${code}`.split(',')
        const name: any = []
        BIZ_TYPE_LIST.forEach((v) => {
          if (tmpArr.includes(v.code)) {
            name.push(v.name)
          }
        })
        return name.join(',')
      }
      getDetail()
      return {
        ...toRefs(datas),
        onClickTab,
        onStop,
        toEdit,
        onAllocation,
        getDetail,
        onTermination,
        filterPhone,
        onCallPhone,
        refreshList,
        getIntendedBusinessName
      }
    }
  })
</script>

<style lang="less" scoped>
  .tab-content {
    margin: 8px 0 78px;
  }
  .user-info {
    margin-bottom: 8px;
    background: var(--bg-global-weaker);
    padding: 16px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      flex: 1;
      margin-right: 8px;
      .name {
        font: var(--font-main-title-strengthen);
        color: var(--texticon-default-strong);
        margin-bottom: 6px;

        span {
          margin-left: 8px;
        }
      }
      .other {
        font: var(--font-main-body);
        color: var(--texticon-default-strong);
        margin-top: 2px;
        span {
          &:not(:first-child) {
            margin-left: 8px;
            color: var(--texticon-default-stronger);
          }
        }
      }
    }

    .right {
      width: 40px;
      height: 40px;
      background: var(--texticon-color-brand-normal);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 24px;
        height: 24px;
      }
    }
  }

  .foot {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70px;
    padding: 12px 0px;
    z-index: 9;
    box-sizing: border-box;
    background: var(--bg-global-weaker);
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .btn {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;

      font: var(--font-point);
      color: var(--texticon-default-strong);

      img {
        width: 28px;
        height: 28px;
        margin-bottom: 4px;
      }
    }
  }
</style>
